<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.0-12/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">

</head>
<body>
<div class="nav-one">
    <div class="container">
        <div class="upper clearfix">
            <div class="upper_left">
                <ul>
                    <li class="upper-left-one nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            中国大陆
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">全球</a>
                            <a class="dropdown-item" href="#">中国大陆</a>
                            <!--<div class="dropdown-divider"></div>-->
                            <a class="dropdown-item" href="#">香港</a>
                            <a class="dropdown-item" href="#">澳门</a>
                            <a class="dropdown-item" href="#">韩国</a>
                            <a class="dropdown-item" href="#">马来西亚</a>
                            <a class="dropdown-item" href="#">澳大利亚</a>
                            <a class="dropdown-item" href="#">新加坡</a>
                            <a class="dropdown-item" href="#">加拿大</a>
                            <a class="dropdown-item" href="#">美国</a>
                            <a class="dropdown-item" href="#">日本</a>
                        </div>
                    </li>


                    <li class="or"><a href="">亲，请登录</a></li>
                    <li><a href="">免费注册</a></li>
                    <li><a href="">手机逛淘宝</a></li>
                </ul>
            </div>
            <div class="upper_right">
                <ul>
                    <li><span>我的淘宝&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i>
                        <div>
                            <ul>
                                <li>已买到的宝贝</li>
                                <li>我的足迹</li>
                            </ul>
                        </div>
                    </li>
                    <li><span><i class="i-one fas fa-shopping-cart"></i>&nbsp;购物车&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i> </li>
                    <li><span><i class="i-two fas fa-star"></i>&nbsp;收藏夹&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i>
                        <div>
                            <ul>
                                <li>已收藏的宝贝</li>
                                <li>已收藏的店铺</li>
                            </ul>
                        </div>
                    </li>
                    <li><span>商品分类</span></li>
                    <li>|</li>
                    <li><span>千牛卖家中心&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i>
                        <div class="div-display">
                            <ul>
                                <li>免费开店</li>
                                <li>已卖出的宝贝</li>
                                <li>正在出售的宝贝</li>
                                <li>卖家服务市场</li>
                                <li>卖家培训中心</li>
                                <li>体检中心</li>
                                <li>问商友</li>
                            </ul>
                        </div>
                    </li>
                    <li><span>联系客服&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i>
                        <div>
                            <ul>
                                <li>消费者客服</li>
                                <li>卖家客服</li>
                            </ul>
                        </div>
                    </li>
                    <li><span><i class="i-three fas fa-bars"></i>&nbsp;网站导航&nbsp;&nbsp;</span><i class="fas fa-angle-down"></i> </li>
                </ul>
            </div>
        </div>
        <div class="middle"></div>
        <div class="lower"></div>
    </div>
</div>
<div class="header-search">
    <div class="container">
        <div class="row">
            <div class="col-3">
                <a href=""><img src="img/logo.gif" alt=""></a>
            </div>
            <div class="col-6">
                <div class="search">
                    <ul class="nav">
                        <li class="active">宝贝</li>
                        <li>天猫</li>
                        <li>店铺</li>
                    </ul>
                    <div class="main">
                        <div class="active num">
                            <div class="population">
                                <div class="input-group">
                                    <input type="text" placeholder="    中年男士秋装上衣">
                                </div>
                                <div class="location">
                                    <i class="fas fa-camera-retro"></i>
                                </div>
                                <i class="fas fa-search"></i>
                            </div>
                            <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                            </div>
                            <p><a href="">新款连衣裙</a><a href="">四件套</a>
                                <a href="" class="active">潮流T恤</a><a href="">时尚女鞋</a>
                                <a href="">短裤</a><a href="">半身裙</a><a href="">男士外套</a>
                                <a href="">墙纸</a><a href=""class="active">行车记录仪</a>
                                <a href="">新款男鞋</a><a href="">耳机</a></p>
                        </div>
                        <div class="num">2</div>
                        <div class="num">3</div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                    <div class="qr">
                        <a href="javascript:;" target="_self" class="J_QrFt qr-ft" role="button" aria-label="关闭二维码" data-spm-click="gostr=/tbindex;locaid=d2016;name=二维码关闭按钮">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <div class="con">
                        <p>手机淘宝</p>
                        <a href=""><img src="img/qr-code" alt=""></a>
                    </div>



            </div>
        </div>

    </div>
</div>
<div class="planting-map">
    <p class="map">
        <span>主题市场</span>
        <a href="">天猫</a><a href="">聚划算</a>
        <a href="">天猫超市</a><i>&nbsp;|&nbsp;</i><a href="">海淘购</a>
        <a href="">电器城</a><a href="">司法拍卖</a>
        <a href="">淘宝心选</a><a href="">兴农扶贫</a>
        <i>&nbsp;|&nbsp;</i>
        <a href="">飞猪旅行</a><a href="">智能生活</a>
        <a href="">苏宁易购</a>
        <a href=""><img src="" alt=""></a>
    </p>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="row">
                    <div class="col-3"></div>
                    <div class="col-9"></div>
                </div>
            </div>
            <div class="col-4"></div>
        </div>
    </div>

</div>
<div class="main">
    <div class="container">
        <div class="banner">
            <div class="row">
                <div class="col-9">
                    <div class="row">
                        <div class="col-3">
                            <ul>
                                <li><a href="">女装</a><span> / </span><a href="">男装</a><span> / </span><a href="">内衣</a></li>
                                <li><a href="">鞋靴</a><span> / </span><a href="">箱包</a><span> / </span><a href="">配件</a></li>
                                <li><a href="">童装玩具</a><span> / </span><a href="">孕产</a><span> / </span><a href="">用品</a></li>
                                <li><a href="">家电</a><span> / </span><a href="">数码</a><span> / </span><a href="">手机</a></li>
                                <li><a href="">眼镜</a><span> / </span><a href="">珠宝</a><span> / </span><a href="">保健品</a></li>
                                <li><a href="">运动</a><span> / </span><a href="">户外</a><span> / </span><a href="">乐器</a></li>
                                <li><a href="">游戏</a><span> / </span><a href="">动漫</a><span> / </span><a href="">影视</a></li>
                                <li><a href="">美食</a><span> / </span><a href="">生鲜</a><span> / </span><a href="">零食</a></li>
                                <li><a href="">鲜花</a><span> / </span><a href="">宠物</a><span> / </span><a href="">农资</a></li>
                                <li><a href="">工具</a><span> / </span><a href="">装修</a><span> / </span><a href="">建材</a></li>
                                <li><a href="">家具</a><span> / </span><a href="">家饰</a><span> / </span><a href="">家纺</a></li>
                                <li><a href="">汽车</a><span> / </span><a href="">二手车</a><span> / </span><a href="">用品</a></li>
                                <li><a href="">办公</a><span> / </span><a href="">DIY</a><span> / </span><a href="">五金电子</a></li>
                                <li><a href="">百货</a><span> / </span><a href="">餐厨</a><span> / </span><a href="">家庭保健</a></li>
                                <li><a href="">学习</a><span> / </span><a href="">卡券</a><span> / </span><a href="">本地服务</a></li>
                            </ul>
                            <ul>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                                <li>></li>
                            </ul>
                        </div>
                        <div class="col-7">
                            <div class="top">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img src="img/lun1.webp" alt=""></div>
                                        <div class="swiper-slide"><img src="img/lun2.jpg" alt=""></div>
                                        <div class="swiper-slide"><img src="img/lun3.jpg" alt=""></div>
                                        <div class="swiper-slide"><img src="img/lun4.png" alt=""></div>
                                        <div class="swiper-slide"><img src="img/lun5.webp" alt=""></div>
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                            <div class="bottom">
                                <em>理想生活上天猫</em>
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">Slide 1</div>
                                        <div class="swiper-slide">Slide 2</div>
                                        <div class="swiper-slide">Slide 3</div>
                                        <div class="swiper-slide">Slide 4</div>
                                        <div class="swiper-slide">Slide 5</div>
                                        <div class="swiper-slide">Slide 6</div>
                                    </div>
                                    <!-- Add Pagination -->
                                    <div class="swiper-pagination"></div>
                                    <!-- Add Arrows -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>

                        </div>
                        <div class="col-2">
                            <div class="right-one">
                                <img src="img/hun.webp" alt="">
                            </div>
                            <div class="right-two">
                                <p>热卖</p>
                                <img src="img/hun2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-3"></div>
            </div>
        </div>
    </div>
</div>


<script src="js/script.js"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.top .swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

    var swiper2 = new Swiper('.bottom .swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });
</script>
</body>
</html>